import React, { useEffect, useState } from "react";
import TabBar from "../../components/tabbar";
import { getList } from "../../service";
import { List, Image } from "react-vant";
import { useNavigate } from "react-router-dom";
interface ListRawState {
  id: string;
  desc: string;
  title: string;
  image: string;
}

const Index: React.FC = () => {
  const [list, setList] = useState<ListRawState[]>([]);
  const navigate = useNavigate();
  const fetchList = async () => {
    const resp = await getList({ _page: 1 });
    setList([...list, ...resp.data.data]);
  };

  useEffect(() => {
    fetchList();
  }, []);

  return (
    <div>
      <div>
        <List onLoad={fetchList}>
          {list.map((v) => {
            return (
              <dl
                key={v.id}
                style={{ display: "flex" }}
                onClick={() =>
                  navigate("/detail/" + v.id, {
                    state: v,
                  })
                }
              >
                <dt>
                  <Image
                    src={v.image}
                    alt=""
                    lazyload
                    width={120}
                    height={80}
                  />
                </dt>
                <dd>
                  <h3>{v.title}</h3>
                  <p>{v.desc}</p>
                </dd>
              </dl>
            );
          })}
        </List>
      </div>
      <TabBar></TabBar>
    </div>
  );
};

export default Index;
